<template>
	<view class="page">
		<view class="head">
			<u-tabs :list="list1" @click="click"></u-tabs>
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{ isEdit ? '完成' : '编辑' }}</text>
			</view>
		</view>

		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item, index) in goodsList" @click="onSkip('goods')" :key="index">
					<view class="check" v-if="isEdit" @click.stop="toggleCheck(index)">
						<text class="iconfont" :class="item.isChecked ? 'icon-checked' : 'icon-check'"></text>
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{ item.name }}</text>
							</view>

							<view class="price-num">
								<view class="price">
									<text class="min">￥</text>
									<text class="max">{{ item.price }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 结算，只有在编辑模式下显示 -->
			<view class="close-account" v-if="isEdit">
				<view class="check-total">
					<view class="check" @click="toggleSelectAll">
						<text class="iconfont" :class="allSelected ? 'icon-checked' : 'icon-check'"></text>
						<text class="all">全选</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-del">
						<text class="del" @click="deleteSelectedItems">删除</text>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin

		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)

				upOption: {
					use: false,
				},
				list1: [{
					name: '古玩商品',
				}, {
					name: '拍卖商品',
				}, {
					name: '鉴宝师'
				}],
				show: false,
				isEdit: false,
				goodsList: [{
					id: 1,
					name: '玉器',
					price: '219.00',
					img: '/static/img/goods_thumb_01.png',
					isChecked: false,
				}],
				showDetailItem: null,
			};
		},
		onReady() {
			uni.hideTabBar()
		},
		computed: {
			allSelected() {
				return this.goodsList.every(item => item.isChecked);
			},
			selectedItemCount() {
				return this.goodsList.filter(item => item.isChecked).length;
			},
		},
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toggleCheck(index) {
				this.goodsList[index].isChecked = !this.goodsList[index].isChecked;
			},
			toggleSelectAll() {
				const newState = !this.allSelected;
				this.goodsList.forEach(item => {
					item.isChecked = newState;
				});
			},
			deleteSelectedItems() {
				this.goodsList = this.goodsList.filter(item => !item.isChecked); // 删除所有选中的商品
			},
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'GoodsOn.scss';
</style>